<template>
  <div id="userDynamicList" v-if="props.postList">
    <div ref="container" style="height: 20%;background-color: white"
         v-for="post in props.postList.data.records">
      <van-sticky :container="container" v-if="props.type === undefined || post.type === props.type">
        <div  @click="toDetails(post.id)">
          <van-space style="padding-left: 4%;padding-top: 2%">
            <van-image :src="post.user.userAvatar" round
                       width="40px" height="40"/>
            <span>{{ post.user.userName }}</span>
          </van-space>
        </div>
        <div @click="toDetails(post.id)">
          <van-space wrap>
            <div style="padding-left: 12%;" v-for="photo in post.photos" @click.stop>
              <van-image :src=photo width="160px"
                         radius="20px" height="100"
                         @click="showPreview(photo)"
              />
            </div>
          </van-space>
        </div>
        <div  @click="toDetails(post.id)">
          <van-space style=" padding-left: 6%;
              " direction="vertical" size="1px">
            <div style="font-weight: bold;font-size: 18px">{{ post.title }}</div>
            <div class="small-box"/>
            <!-- 最多显示三行 -->
            <div class="van-multi-ellipsis--l3" style="width: 300px">
              {{ post.content }}
            </div>
          </van-space>
        </div>
        <div class="footer">
          <span id="small-btn">
            <van-icon :name="post.hasThumb ? 'good-job' : 'good-job-o'" size="20" @click="addThumb(post)">{{ post.thumbNum }}</van-icon>
          </span>
          <span id="small-btn">
            <van-icon name="other-pay" size="20"></van-icon>
          </span>
          <span id="small-btn">
            <van-icon :name="post.hasFavour ? 'star' : 'star-o'" size="20" @click="addFavour(post)"></van-icon>
          </span>
          <span id="small-btn">
            <van-icon name="share-o" size="20" @click="sendData"></van-icon>
          </span>
        </div>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"/>
      </van-sticky>
    </div>
    <div class="default-box"/>
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {ImagePreview} from "vant";
import myAxios from "../plugins/myAxios";
import {useRoute, useRouter} from "vue-router";


const container = ref(null)
const props = defineProps({
  postList: Object,
  type: String
})

const emit = defineEmits(['send-data']);

const router = useRouter();
const route = useRoute();


const showPreview = (url: any) => {
  ImagePreview([url]);
}

const addThumb = (post: Object) => {
  if (post.hasThumb){
    post.thumbNum--
    post.hasThumb=false
  }
  else {
    post.thumbNum++
    post.hasThumb=true
  }

  myAxios.post('/post_thumb/',{
    postId: post.id
  })
}
const addFavour = (post: Object) => {
  if (post.hasFavour){
    post.favourNum--
    post.hasFavour=false
  }
  else {
    post.favourNum++
    post.hasFavour=true
  }

  myAxios.post('/post_favour/',{
    postId: post.id
  })
}

const sendData = () => {
  const data = true;
  emit('send-data',data)
}

const toDetails = (postId: number) => {
  router.push({
    path: '/social/info',
    query: {
      postId
    }
  })
}
</script>

<style scoped>
.footer {
  display: flex;
  width: 100%;
  height: 35px;
  position: relative;
  top: 10px;
  justify-content: space-around;
}

#small-btn {
  margin-top: 8px;
  font-size: 1px;
}
</style>
